<template>
	<view>
		<view class="nav_bar">
			<view class="top-bg flex-row items-center justify-center">
				<view class="top-status flex-col items-center justify-center">
					<image src="/static/img/chongdian.png" mode="" class="chong-icon"></image>
					<text class="c-time" >{{time}}</text>
					<text class="text-left">{{info.status == '0' ? '充电中' : info.status == '1' ? '待支付' : '已结束'}}</text>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="box card">
				<view class="list">
					<view class="item">
						<view class="left">
							设备编号
						</view>
						<view class="right">
							{{info.num}}
						</view>
					</view>
					<view class="item">
						<view class="left">
							充电位置
						</view>
						<view class="right">
							{{info.name}}
						</view>
					</view>
					<view class="item">
						<view class="left">
							消费金额
						</view>
						<view class="right">
							{{info.price}}元
						</view>
					</view>
					<view class="item">
						<view class="left">
							充电方式
						</view>
						<view class="right">
							{{info.type == '0' ? '充满自停' : info.type + '小时'}}
						</view>
					</view>
					<view class="item" v-if="info.power">
						<view class="left">
							充电功率
						</view>
						<view class="right">
							{{info.power}}w
						</view>
					</view>
					<!-- <view class="item">
						<view class="left">
							计费费率
						</view>
						<view class="right">
							{{info.power}}元/小时
						</view>
					</view> -->
					<view class="item">
						<view class="left">
							开始时间
						</view>
						<view class="right">
							{{info.startTime || ''}}
						</view>
					</view>
					<view class="item" v-if="info.endTime">
						<view class="left">
							结束时间
						</view>
						<view class="right">
							{{info.endTime}}
						</view>
					</view>
					<view class="item" v-if="info.endReason">
						<view class="left">
							结束原因
						</view>
						<view class="right">
							{{info.endReason}}
						</view>
					</view>
					
				</view>
				<view class="tips">
					注：不足1小时将按照1小时进行收费
				</view>
			</view>
			<view class="btn" @click="handleEnd" v-if="info.status == '0'">
				结束充电
			</view>
		</view>
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				info:{},
				time:'00:00:00',
				timeShow:null,
				infoTime:null
			};
		},
		onLoad(e) {
			if(e.id){
				this.id = e.id
				this.infoFn()
			}
		},
		onUnload() {
			if(this.infoTime != null) clearInterval(this.infoTime)
			if(this.timeShow != null) clearInterval(this.timeShow)
		},
		methods:{
			handleInfo(){
				if(this.infoTime != null) clearInterval(this.infoTime)
				this.infoTime = setInterval(()=>{
					this.infoFn()
				},60000)
			},
			handleEnd(){
				uni.showModal({
					content:'是否继续结束充电',
					success:(e)=>{
						if(e.confirm){
							this.endFn()
						}
					}
				})
			},
			handleTime(e){
				var newTime = new Date().getTime()
				var orderTime = new Date(e).getTime()
				let allTime = newTime - orderTime
				let h, m, s;
				if (allTime > 0) {
					h = Math.floor(allTime / 1000 / 60 / 60 % 60);
					m = Math.floor(allTime / 1000 / 60 % 60);
					s = Math.floor(allTime / 1000 % 60);
					h = h < 10 ? '0' + h : h
					m = m < 10 ? '0' + m : m
					s = s < 10 ? '0' + s : s
					this.time = h + ':' + m + ":" + s
					console.log(this.time,'时间');
				} else {
					this.time = '00:00:00'
				}
			},
			async endFn(){
				let res = await this.$request('recharge/end-two',{
					id:this.id
				},{showLoading: true})
				if(res.result == '0'){
					this.$util.msg('结束成功')
					if(this.timeShow != null) clearInterval(this.timeShow)
					setTimeout(()=>{
						uni.navigateBack()
					},2500)
				}else{
					this.$util.msg(res.resultNote)
				}
			},
			async infoFn(){
				console.log('执行');
				let res = await this.$request('recharge/record-detail-two',{
					id:this.id
				})
				if(res.result == '0'){
					this.info = res.data
					if(res.data.status == '0'){
						this.handleTime(res.data.startTime)
						if(this.timeShow != null) clearInterval(this.timeShow)
						this.timeShow = setInterval(()=>{
							this.handleTime(res.data.startTime)
						}, 1000);
						
						this.handleInfo()
					}else{
						this.time = res.data.rechargeTime
					}
				}else{
					this.$util.msg(res.resultNote)
				}
			}
		},
	}
</script>

<style lang="scss" scoped> 
	.nav_bar{
		height: 431rpx;
		background: $uni-color-bg;
		.top-bg {
			padding-top: 30rpx;
			.top-status {
				width: 254rpx;
				height: 254rpx;
				background: #ffffff;
				border-radius: 50%;
				.chong-icon {
					width: 60rpx;
					height: 33rpx;
				}
				.c-time {
					font-size: 44rpx;
					font-weight: bold;
					color: #000000;
					padding: 10rpx 0;
				}
				.text-left {
					font-size: 26rpx;
					font-weight: 500;
					color: #999999;
				}
			}
		}
	}
	.content{
		padding: 30rpx;
		transform: translateY(-130rpx);
		.card{
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;
		}
		.box{
			.list{
				margin-bottom: 20rpx;
				.item{
					display: flex;
					justify-content: space-between;
					padding: 10rpx 0;
					.left{
						width: 30%;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #666666;
						white-space:nowrap;
					}
					.right{
						width: 70%;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
						word-break: break-all;
					}
				}
			}
			.tips{
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FD4E3C;
				line-height: 61rpx;
				padding-top: 20rpx;
				border-top: 1rpx solid #E7E7E7;
				text-align: center;
			}
		}
		.btn{
			width: 640rpx;
			height: 110rpx;
			background: $uni-color-bg;
			border-radius: 55rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #fff;
			line-height: 110rpx;
			text-align: center;
			margin: 50rpx auto 0;
		}
	}
</style>
